<!DOCTYPE HTML>
<html>
<head>
	
	<title>www.cssmoban.com</title>
	
	<link rel="stylesheet" href="./css/reset.css" type="text/css" />
	<link rel="stylesheet" href="./css/style.css" type="text/css" />
	<link href='http://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css' />
	
	<!--[if IE]>
	<script src="./js/html5.js" type="text/javascript"></script>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
	<![endif]-->
	
	<script src="./js/jquery.js"></script>
	<script src="./js/selectivizr.js"></script>
	<script src="./js/prettyphoto.js"></script>
	<script src="./js/onload.js"></script>

    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>

<div id="page">

	<!-- BEGIN TITLEBAR -->
	<header id="titlebar">

		<a href="http://www.cssmoban.com/" id="logo"></a>

		<ul id="top_menu">
			<li>
				<a href="./index.html">Home</a>
			</li>
			<li>
				<a href="./about.htm.html">About Us</a>
			</li>
			<li>
				<a href="./blog.htm.html">Blog</a>
			</li>
			<li class="current-menu-item">
				<a href="#">Shortcodes</a>
				<ul>
					<li class="current-menu-item">
						<a href="./columns.htm.html">Columns</a>
					</li>
					<li>
						<a href="./elements.htm.html">Elements</a>
					</li>
					<li>
						<a href="./typography.htm.html">Typography</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="./portfolio.htm.html">Portfolio</a>
                 <ul>
					<li>
						<a href="./portfolio.htm.html">Portfolio Image</a>
					</li>
					<li>
						<a href="./portfolio-video.htm.html">Portfolio Video</a>
					</li>
					<li>
						<a href="./portfolio-other.htm.html">Portfolio Other</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="./contact.htm.html">Contact</a>
			</li>
		</ul>

		<ul id="top">
			<li>Want more?</li>
			<li>
				<a href="#" class="cloud facebook">
					<span class="arrow"></span>
				</a>
			</li>
			<li>
				<a href="#" class="cloud rss">
					<span class="arrow"></span>
				</a>
			</li>
		</ul>

	</header>
	<!-- END TITLEBAR -->


	<!-- BEGIN ARTICLE -->
	<article class="typography page_text" id="content">
	
		<header class="page_text title">
			<h1>Shortcodes - <strong>Columns</strong></h1>
		</header>

		<div class="columns">
		
			<div class="column column_50">
				<h6>1/2 Columns</h6>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum, dolor sit amet, varius laoreet. Morbi justo. <strong>Phasellus adipiscing</strong>. Nunc vitae arcu magna, gravida wisi id lacus. Vivamus est ullamcorper orci a adipiscing gravida tempor, tortor lacus tellus enim, malesuada augue pulvinar mollis, purus dolor vel lorem ligula, in tortor metus nec turpis et lectus. Mauris nec adipiscing elit.</p>
			</div>

			<div class="column column_50">
				<h6>1/2 Columns</h6>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum, dolor sit amet, varius laoreet. Morbi justo. <strong>Phasellus adipiscing</strong>. Nunc vitae arcu magna, gravida wisi id lacus. Vivamus est ullamcorper orci a adipiscing gravida tempor, tortor lacus tellus enim, malesuada augue pulvinar mollis, purus dolor vel lorem ligula, in tortor metus nec turpis et lectus. Mauris nec adipiscing elit.</p>
			</div>
		
		</div>
		
		
		<div class="columns">
			<div class="column column_50">
				<h6>1/2 Columns</h6>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum, dolor sit amet, varius laoreet. Morbi justo. <strong>Phasellus adipiscing</strong>. Nunc vitae arcu magna, gravida wisi id lacus. Vivamus est ullamcorper orci a adipiscing gravida tempor, tortor lacus tellus enim, malesuada augue pulvinar mollis, purus dolor vel lorem ligula, in tortor metus nec turpis et lectus. Mauris nec adipiscing elit.</p>
			</div>
			
			<div class="column column_25">
				<h6>1/4 Columns</h6>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum, dolor sit amet, varius laoreet. Morbi justo. <strong>Phasellus adipiscing</strong>. Nunc vitae arcu magna, gravida wisi id lacus.</p>
			</div>
			
			<div class="column column_25">
				<h6>1/4 Columns</h6>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum, dolor sit amet, varius laoreet. Morbi justo. <strong>Phasellus adipiscing</strong>. Nunc vitae arcu magna, gravida wisi id lacus.</p>
			</div>
		</div>
		
		
		<div class="columns">
			<div class="column column_25">
				<h6>1/4 Columns</h6>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum, dolor sit amet, varius laoreet. Morbi justo. <strong>Phasellus adipiscing</strong>. Nunc vitae arcu magna, gravida wisi id lacus.</p>
			</div>
			
			<div class="column column_25">
				<h6>1/4 Columns</h6>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum, dolor sit amet, varius laoreet. Morbi justo. <strong>Phasellus adipiscing</strong>. Nunc vitae arcu magna, gravida wisi id lacus.</p>
			</div>
			
			<div class="column column_25">
				<h6>1/4 Columns</h6>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum, dolor sit amet, varius laoreet. Morbi justo. <strong>Phasellus adipiscing</strong>. Nunc vitae arcu magna, gravida wisi id lacus.</p>
			</div>
			
			<div class="column column_25">
				<h6>1/4 Columns</h6>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum, dolor sit amet, varius laoreet. Morbi justo. <strong>Phasellus adipiscing</strong>. Nunc vitae arcu magna, gravida wisi id lacus.</p>
			</div>
		</div>


		<div class="columns">
			<div class="column column_33">
				<h6>1/3 Columns</h6>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum, dolor sit amet, varius laoreet. Morbi justo. <strong>Phasellus adipiscing</strong>. Nunc vitae arcu magna, gravida wisi id lacus.</p>
			</div>
			
			<div class="column column_33">
				<h6>1/3 Columns</h6>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum, dolor sit amet, varius laoreet. Morbi justo. <strong>Phasellus adipiscing</strong>. Nunc vitae arcu magna, gravida wisi id lacus.</p>
			</div>
			
			<div class="column column_33">
				<h6>1/3 Columns</h6>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum, dolor sit amet, varius laoreet. Morbi justo. <strong>Phasellus adipiscing</strong>. Nunc vitae arcu magna, gravida wisi id lacus.</p>
			</div>
		</div>
		

		<div class="columns">
			<div class="column column_33">
				<h6>1/3 Columns</h6>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum, dolor sit amet, varius laoreet. Morbi justo. <strong>Phasellus adipiscing</strong>. Nunc vitae arcu magna, gravida wisi id lacus.</p>
			</div>
			
			<div class="column column_66">
				<h6>2/3 Columns</h6>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum, dolor sit amet, varius laoreet. Morbi justo. <strong>Phasellus adipiscing</strong>. Nunc vitae arcu magna, gravida wisi id lacus. Vestibulum non lacus. Ut a elit sed nunc commodo id, lacinia lacus. Ut ac nisl. Vestibulum aliquam vehicula sapien massa in quam. Pellentesque eu justo. Aliquam erat at ultrices varius. Cum sociis natoque penatibus</p>
			</div>
		</div>
		
		<div class="columns">
			<div class="column column_25">
				<h6>1/4 Columns</h6>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum, dolor sit amet, varius laoreet. Morbi justo. <strong>Phasellus adipiscing</strong>. Nunc vitae arcu magna, gravida wisi id lacus.</p>
			</div>
			
			<div class="column column_75">
				<h6>3/4 Columns</h6>
				<p>Maecenas gravida, quam purus, nec malesuada et, porttitor risus. Sed sed
Pulvinar, quam nulla, placerat id, sapien. Maecenas nunc. Vestibulum ut nulla mi, viverra sit amet augue. Nulla semper. Sed dignissim. Pellentesque facilisis gravida, erat dictum eu, aliquet eget, tortor. Maecenas nunc. Praesent elit est, dapibus quam et tortor. In ultricies tortor eget volutpat non, dictum aliquet lacinia erat. Fusce venenatis eu, ullamcorper lorem ligula, egestas sit amet quam. Aliquam orci. </p>
			</div>
		</div>
		
		
		<div class="clear"></div>

	</article>
	<!-- END ARTICLE -->
	
	


</div>
<!--  END PAGE -->


<!--  START FOOTER -->
<footer id="footer">
	
	<section class="contact">
		
		<span class="mobile">
			<strong>Mobile Phone:</strong> 555 152 535
		</span>

		<span class="mail">
			<strong>E-mail:</strong> <a href="mailto:contact@experience.com">contact@experience.com</a>
		</span>
		
		<a class="top">top</a>

	</section>

	<nav>
		<ul id="footer_menu">
			<li><a href="./index.html">Home</a></li>
			<li><a href="./about.htm.html">About Us</a></li>
			<li><a href="./blog.htm.html">Blog</a></li>
			<li class="current-menu-item"><a href="./typography.htm.html">Shortcodes</a></li>
			<li><a href="./portfolio.htm.html">Portfolio</a></li>
			<li><a href="./contact.htm.html">Contact</a></li>
		</ul>
	</nav>
	
	<p class="copyright">
		&copy; Copyright &copy; 2013.Company name All rights reserved.<a target="_blank" href="http://www.cssmoban.com/" title="模板之家">模板之家</a> Collect from <a href="http://www.cssmoban.com/" title="网站模板" target="_blank">网站模板</a>
	</p>

</footer>
<!--  END FOOTER -->



</body>
</html>